<template>
  <div id="app">

    <c-navbar></c-navbar>
    <!--
      导航切换过渡transition的使用
        mode：过渡模式
            out-in 离开组件先过渡
            in-out 进来的组件先过渡
    -->

    <!-- 通过name属性使用自定义的类名实现过渡 -->
    <transition :name="names">
      <!-- 在router-view中设置的class值会反映到对应的组件中 -->
      <router-view class="center"></router-view>
    </transition>

    <!-- 命名视图 -->
    <router-view name="slider"></router-view>


    <span>当前导航的下标:</span>
    {{ $route.meta.index }}


    <!-- 编程式导航 -->
    <input type="button" value="后退" @click="backHandle">

    <input type="button" value="前进" @click="forwardHandle">

    <input type="button" value="控制后退前进步数" @click="goHandle">

    <input type="button" value="push" @click="pushHandle">

    <input type="button" value="replace" @click="replaceHandle">

  </div>
</template>

<script>
import CNavbar from './components/CNavbar'
export default {
  data() {
    return {
      names:'left'
    }
  },
  methods: {
    backHandle(){
      this.$router.back();
    },
    forwardHandle(){
      this.$router.forward();
    },
    goHandle(){
      this.$router.go(-1);
    },
    pushHandle(){
      this.$router.push('/about');
    },
    replaceHandle(){
      this.$router.replace('/document');
    }

  },
  //监控$route变化，通过meta中的数据动态设置name属性和可以实现左右动态切换
  watch: {
    $route(to,from){
      // console.log(from.meta.index); //离开导航下表
      // console.log(to.meta.index);   //目标导航下标

      if(from.meta.index>to.meta.index){
        this.names='left';
      }else if(from.meta.index<to.meta.index){
        this.names='right';
      }
    }
  },
  components: {
    CNavbar
  }
}
</script>

<style>
 /* .v-enter{
    opacity:0;
  }

  .v-enter-to{

    opacity: 1;
  }

  .v-enter-active{
    transition:1s;
  }

  .v-leave{
    opacity:1;
  }

  .v-leave-to{

    opacity: 0;
  }

  .v-leave-active{
    transition:1s;
  }*/

  .left-enter{
    transform: translateX(100%);
  }

  .left-enter-to{
    transform: translateX(0);
  }

  .left-leave{
    transform: translateX(0);
  }

  .left-leave-to{
    transform: translateX(-100%);
  }

  .left-enter-active,.left-leave-active{
    transition: 1s;
  }


 .right-enter{
   transform: translateX(-100%);
 }

 .right-enter-to{
   transform: translateX(0);
 }

 .right-leave{
   transform: translateX(0);
 }

 .right-leave-to{
   transform: translateX(100%);
 }

 .right-enter-active,.right-leave-active{
   transition: 1s;
 }
</style>
